@extends('layouts.app')
@if (isset($category))
    @include('package.sidebar')
@endif
@section('content')
    <div class="content" >
        <a class="btn btn-info btn-sm" href="{{ redirect()->back()->getTargetUrl() }}"> 返回 </a>
        <br />
        <br />
        {!! form($form) !!}
    </div>
@endsection
@push('scripts')
    <script>
        // 按照客户要求, 修改表单样式
        // 表单通过后台生成, 所以通过js调整样式 
        var _form_type = "{{isset($flag) ? $flag : ''}}";
        if(_form_type == 'package_lib'){
            $('.content').find('form').addClass('form-inline')
            $('.content').find('form').find('label').attr('style', 'width:80px;text-align:center')
            $('.form-group').attr('style', 'margin:10px 0px;')
            
            $('[name="value"]').attr('style', 'width:1220px;')
            $('[name="value"]').parent().after('<br>')

            $('[name="price"]').attr('style', 'width:250px;')
            $('[name="discount"]').attr('style', 'width:250px;margin-right: 85px;')
            $('[for="discount"]').attr('style', 'width:280px;text-align:right;margin-right:10px;')
            $('[name="sort"]').attr('style', 'width:250px;')
            $('[name="sort"]').parent().after('<br>')
            
            $('[for="cover"]').parent().find('br').remove();
            $('[for="cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="cover"]').parent().find('p').after('<br>');
            $('[for="cover"]').parent().after('<br>');
            
            $('[for="description"]').parent().after('<br>');
        } else if (_form_type == 'package'){
            $('form').attr('autocomplete', 'off')
            $('.content').find('form').addClass('form-inline')
            $('.content').find('form').find('label').attr('style', 'width:80px;text-align:center')
            $('.form-group').attr('style', 'margin:10px 0px;')

            $('[name="name"]').attr('style', 'width:1220px;')
            $('[name="name"]').parent().after('<br>')

            $('[name="display_price"]').attr('style', 'width:130px;')
            $('[name="price"]').attr('style', 'width:130px;')
            $('[name="prepay"]').attr('style', 'width:130px;')
            $('[name="virtual_sales_volume"]').attr('style', 'width:130px;')
            $('[name="sort"]').attr('style', 'width:130px;')
            $('[name="sort"]').parent().after('<br>')

            $('[name="photo"]').attr('style', 'width:130px;')
            $('[name="modelling"]').attr('style', 'width:130px;')
            $('[name="truing"]').attr('style', 'width:130px;')
            $('[name="truing"]').parent().after('<br>')

            $('[for="is_free"]').attr('style', 'width:190px;height:34px;line-height:30px')
            $('[for="is_balance_pay"]').attr('style', 'width:190px;height:34px;line-height:30px')
            $('[for="is_recharge"]').attr('style', 'width:190px;height:34px;line-height:30px')
            $('[for="recharge_money"]').attr('style', 'width:90px;height:34px;line-height:30px;margin-left:-20px;')
            $('[for="recharge_money"]').parent().find('input').attr('style', 'width:100px;margin-right:20px')
            $('[for="end_time"]').attr('style', 'width:90px;height:34px;line-height:30px;')
            $('[for="end_time"]').parent().find('input').attr('style', 'width:162px;margin-right:20px')
            $('[for="end_time"]').parent().after('<br>');

            $('[for="tag_id[]"]').parent().after('<br>')

            $('[for="cover"]').next('div').attr('style', 'display:inline')
            $('[for="cover"]').parent().find('br').remove();
            $('[for="cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="cover"]').parent().find('p').after('<br>');
            $('[for="cover"]').parent().after('<br>');

            $('[for="video"]').next('div').attr('style', 'display:inline')
            $('[for="video"]').parent().find('br').remove();
            $('[for="video"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="video"]').parent().find('span').after('<br>');
            $('[for="video"]').parent().after('<br>');

            $('[for="order_cover"]').next('div').attr('style', 'display:inline')
            $('[for="order_cover"]').parent().find('br').remove();
            $('[for="order_cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="order_cover"]').parent().find('p').after('<br>');
            $('[for="order_cover"]').parent().after('<br>');

            $('[for="hot_cover"]').next('div').attr('style', 'display:inline')
            $('[for="hot_cover"]').parent().find('br').remove();
            $('[for="hot_cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="hot_cover"]').parent().find('p').after('<br>');
            $('[for="hot_cover"]').parent().after('<br>');

            $('[for="recommend_cover"]').next('div').attr('style', 'display:inline')
            $('[for="recommend_cover"]').parent().find('br').remove();
            $('[for="recommend_cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="recommend_cover"]').parent().find('p').after('<br>');
            $('[for="recommend_cover"]').parent().after('<br>');

            $('[for="selected_cover"]').next('div').attr('style', 'display:inline')
            $('[for="selected_cover"]').parent().find('br').remove();
            $('[for="selected_cover"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="selected_cover"]').parent().find('p').after('<br>');
            $('[for="selected_cover"]').parent().after('<br>');

            $('[for="share_bg"]').next('div').attr('style', 'display:inline')
            $('[for="share_bg"]').parent().find('br').remove();
            $('[for="share_bg"]').parent().find('p').attr('style', 'margin-left:10px;display:inline');
            $('[for="share_bg"]').parent().find('p').after('<br>');
            $('[for="share_bg"]').parent().after('<br>');

            $('[for="service"]').parent().after('<br>');
        } else if (_form_type == 'explosive'){
            $('.content').find('form').addClass('form-inline')
            $('.content').find('form').find('label').attr('style', 'width:80px;text-align:center')
            $('.form-group').attr('style', 'margin:10px 0px;')

            // $('[name="package_id"]').attr('style', 'width:550px;')
            // $('[name="sort"]').attr('style', 'width:550px;')
            $('[for="package_id"]').parent().after('<br>');
            $('[for="sort"]').parent().after('<br>');
        }

    </script>
    <script>
        tinymce.init({
            selector: '#editor, #editor1',
            plugins: "textcolor colorpicker uploadimage autoresize",
            menubar: false,
            toolbar: "uploadimage undo redo | fontsizeselect bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify",
            images_upload_url: '/admin/upload_image?_token=' + $('meta[name="csrf-token"]').attr('content'),
            images_upload_credentials: true,
            image_dimensions: false,
            image_caption: false,
            image_description: false,
            language: 'zh_CN',
            language_url : '/tinymce/langs/zh_CN.js',
            autoresize_min_height: 350,
            autoresize_max_height: 800,
            content_style: 'img {width: 100%; height: auto; vertical-align: middle;}',
            init_instance_callback: function (editor) {
                editor.on('change', function (e) {
                    editor.save();
                });
            }
        });

        $('.lib-discount').on('change', function () {
            var price = $('.lib-price').val();
            if (price !== "") {
                var price = price * $(this).val()/100;
                $(this).prev().html("折扣(%) 折后价：" + price + "元")
            }
        });

        $('.lib-price').on('change', function () {
            var discount = $('.lib-discount').val();
            if (discount !== "") {
                var price = $(this).val() * discount/100;
                $('.lib-discount').prev().html("折扣(%) 折后价：" + price + "元")
            }
        });
        window.onload = function(){
            $('.lib-price').change();
        }
        $('#package_id.select2').select2({
            ajax: {
                dataType: 'json',
                delay: 250,
                url: function () {
                    return '{{ route('admin.search_type_good', ['type' => 'package']) }}';
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function(row, key) {
                            return {
                                id: key,
                                text: row
                            };
                        })
                    };
                }
            }
        });
        // $("#end_time").datetimepicker({format:"YYYY-MM-DD HH:mm:ss"});
        $("#end_time").datetimepicker({format: "Y-m-d H:i:00", step:10});
        $.datetimepicker.setLocale('zh');

        get_tag()
        function get_tag(){
            shop_id = {{ $shopId }}
            url = '{{ route('admin.tag.select') }}'+'?shop_id='+shop_id
            tag_id = $("#tag_id-select").select2({
                width: "550px",
                ajax: {
                    dataType: 'json',
                    delay: 250,
                    url: function () {
                        return url;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function(row, key) {

                                return {
                                    id: key,
                                    text: row
                                };
                            })
                        };
                    },
                }
            });
        }
        
        @if (empty($is_recharge))
            $('#recharge_money').attr("disabled", true);
        @endif

        $('#is_recharge').click(function(){
            if ($(this).prop("checked"))
                $('#recharge_money').attr("disabled", false)
            else
                $('#recharge_money').attr("disabled", true)
        })
    </script>
@endpush
